<template>
  <div class="marbot">
    <!-- 首页 -->
    <!-- NavBar 导航栏  -->
    <van-nav-bar title="小U商城" left-arrow class="bac" />

    <!-- 自己写的搜索加分类栏 -->
    <div class="nav">
      <div class="wrap">
        <div class="navTop" v-for="item in imgList" :key="item.id">
          <i class="iconfont icon-location firstfont"></i>
          <img :src="item.imgsrc1" alt="" class="logo" />
          <div class="search">
            <i class="iconfont icon-sousuo thirdfont"></i>
            <input type="text" placeholder="按内容搜索" />
          </div>
          <i class="iconfont icon-shangdian secondfont"></i>
        </div>
        <div class="navbot">
          <ul>
            <li
              v-for="(item1, index) in textLink"
              :key="item1.id"
              @click="change(index)"
            >
              <a href="#" :class="[flag == index ? 'border' : '']">{{
                item1
              }}</a>
            </li>
          </ul>
          <a href="#" class="sort"
            ><span><i class="iconfont icon-xuanxiang forth"></i>分类</span></a
          >
        </div>
      </div>
    </div>

    <!--Swipe 轮播   —————— 轮播图-->
    <van-swipe :autoplay="1000">
      <van-swipe-item v-for="item in bannerList" :key="item.id">
        <img class="bannerimg" :src="$imgUrl + item.img" />
      </van-swipe-item>
    </van-swipe>

    <!-- Grid 宫格  自定义内容 : 通过插槽可以自定义格子展示的内容。
    中间图片导航栏
    -->
    <van-grid :border="false" :column-num="5">
      <van-grid-item v-for="item in piclinkLi" :key="item.id">
        <van-image :src="item.pic" />
        <p>{{ item.name }}</p>
      </van-grid-item>
    </van-grid>

    <!-- 自己写的显示秒杀栏 -->
    <div class="kill">
      <div class="wrap">
        <!-- 动态渲染背景图片 -->
        <div
          class="left"
          :style="{
            backgroundImage: 'url(' + imgsrc + ')',
            backgroundSize: '100% 100%',
            backgroundRepeat: 'no-repeat'
          }"
        >
          <div class="title">
            <span class="limit">{{ data }}</span>
            <span class="seemore">{{ data2 }} &gt;</span>
          </div>
          <div class="lb">
            <p class="text">{{ data3 }}</p>
            <ul>
              <li>
                <span>{{ time[0] }}</span
                >:<span>{{ time[1] }}</span
                >:<span>{{ time[2] }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="right">
          <div
            :style="{
              backgroundImage: 'url(' + item.imgsrc1 + ')',
              backgroundSize: '100% 100%',
              backgroundRepeat: 'no-repeat'
            }"
            v-for="(item, index) in imgList1"
            :key="item.id"
          >
            <div>
              <p class="firstp">{{ rightdata[index].p1 }}</p>
              <p class="secondp">{{ rightdata[index].p2 }}</p>
              <p class="thirdp">{{ rightdata[index].p3 }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--Tab 标签页  ————  样式风格   ：   商品列表切换栏 -->
    <van-tabs type="card">
      <van-tab title="最新商品">
        <van-card
          v-for="newGoods in newList"
          :key="newGoods.id"
          :price="newGoods.price.toFixed(2)"
          desc="描述信息"
          :title="newGoods.goodsname"
          :thumb="
            newGoods.img
              ? $imgUrl + newGoods.img
              : 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1870521716,857441283&fm=26&gp=0.jpg'
          "
        />
      </van-tab>
      <van-tab title="爆款商品">
        <van-card
          v-for="hotGoods in hotList"
          :key="hotGoods.id"
          :price="hotGoods.price.toFixed(2)"
          desc="描述信息"
          :title="hotGoods.goodsname"
          :thumb="
            hotGoods.img
              ? $imgUrl + hotGoods.img
              : 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1870521716,857441283&fm=26&gp=0.jpg'
          "
        />
      </van-tab>
      <van-tab title="所有商品">
        <van-card
          v-for="goods in goodsList"
          :key="goods.id"
          :price="goods.price.toFixed(2)"
          desc="描述信息"
          :title="goods.goodsname"
          :thumb="
            goods.img
              ? $imgUrl + goods.img
              : 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1870521716,857441283&fm=26&gp=0.jpg'
          "
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios";
// 引入接口文档
import { getBanner, getIndexGoodsList } from "../util/axios";
export default {
  data() {
    return {
      //自己写的搜索加分类栏
      flag: 0,
      border: "underl",
      imgList: [
        {
          id: 1,
          imgsrc1: require("../assets/images/pic/logo/white.png")
        }
      ],
      textLink: ["推荐", "女装", "鞋包", "居家", "母婴", "美妆"],

      //轮播图列表
      bannerList: [],

      // 中间图片导航栏
      piclinkLi: [
        {
          id: 1,
          pic: require("../assets/images/icon/index/kingkong/seckill.png"),
          name: "限时秒杀"
        },
        {
          id: 2,
          pic: require("../assets/images/icon/index/kingkong/top.png"),
          name: "畅销产品"
        },
        {
          id: 3,
          pic: require("../assets/images/icon/index/kingkong/brand.png"),
          name: "品质大牌"
        },
        {
          id: 4,
          pic: require("../assets/images/icon/index/kingkong/selfsupport.png"),
          name: "小U自营"
        },
        {
          id: 5,
          pic: require("../assets/images/icon/index/kingkong/integral.png"),
          name: "积分商城"
        }
      ],

      // 自己写的显示秒杀栏
      data: "限时秒杀",
      data2: "查看更多",
      data3: "每天0点场，好货秒不停",
      time: ["05", "20", "48"],
      imgsrc: require("../assets/images/pic/plate/index/kingkong/big.png"),
      imgList1: [
        {
          id: 1,
          imgsrc1: require("../assets/images/pic/plate/index/kingkong/small.png")
        },
        {
          id: 2,
          imgsrc1: require("../assets/images/pic/plate/index/kingkong/02.png")
        }
      ],
      rightdata: [
        { id: 1, p1: "品牌上新", p2: "九点整,抢大牌", p3: "疯抢红包" },
        { id: 2, p1: "日常好物", p2: "愿君多采撷", p3: "塞满奖券" }
      ],

      // 商品列表切换栏
      hotList: [], //热门商品
      newList: [], //最新商品
      goodsList: [] //所有商品
    };
  },
  mounted() {
    /*//方法一
     // 页面一加载就调取轮播图接口
    this.getBannerList();
    // 页面一加载就调用首页商品列表
    this.getGoodsList(); */

    //方法二
    // 并发处理操作  获取轮播图和商品列表数据
    // 让你按照执行接口顺序去操作接口
    axios.all([getBanner(), getIndexGoodsList()]).then(
      axios.spread((bannerList, goodsList) => {
        // 轮播图
        if (bannerList.code == 200) {
          this.bannerList = bannerList.list;
        }
        // 商品列表
        if (goodsList.code == 200) {
          this.newList = goodsList.list[0].content;
          this.hotList = goodsList.list[1].content;
          this.goodsList = goodsList.list[2].content;
        }
      })
    );
  },
  methods: {
    change(idx) {
      this.flag = idx;
    },
   /*  // 封装一个获取轮播图的事件
    getBannerList() {
      getBanner().then(res => {
        if (res.code == 200) {
          this.bannerList = res.list;
        }
      });
    },
    // 封装一个获取商品列表的事件
    getGoodsList() {
      getIndexGoodsList().then(res => {
        if (res.code == 200) {
          // console.log(res, "首页的商品列表");
          this.hotList = res.list[0].content;
          this.newList = res.list[1].content;
          this.goodsList = res.list[2].content;
        }
      });
    } */
  }
};
</script>

<style lang="" scoped>
@import url("../assets/css/nav.css");
@import url("../assets/css/secondkill.css");
@import url("../assets/css/things.css");
@import "//at.alicdn.com/t/font_2146621_2foeekg3a1j.css";

.bac {
  background: #ff6040;
}

.bannerimg {
  display: block;
  margin: 0 auto;
  width: 27.92rem;
  height: 16.25rem;
}

.marbot {
  margin-bottom: 60px;
}
</style>
